<template>
  <div class="popularize">
    <div class="search-wrap clearfix">
      <div class="search-wrap-btn fr">
        <!-- <el-button :disabled="loading" type="primary" @click="init">搜索{{ loading }}</el-button> -->
        <el-button :disabled="loading" type="success" @click="add">添加</el-button>
      </div>
    </div>
    <div class="main-wrapper">
      <custom-table :data="listData" :columns="columns">
        <template slot-scope="{ row }">
          <el-button type="text" @click="delect(row.userId)">删除</el-button>
        </template>
      </custom-table>
      <pagination :total="total" @pagination="pagination" />
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="matgin30">
        <el-form ref="file-form" :rules="rules" class="teaching-form" :model="dialogList">
          <el-form-item v-if="dialogList" prop="userId">
            <el-col :span="16">
              <el-input v-model="dialogList.userId" placeholder="请输入用户id" />
            </el-col>
            <el-col :span="8">
              <el-button type="primary" class="marginL20" @click="getUser">查询</el-button>
            </el-col>
          </el-form-item>

          <el-form-item v-if="dialogList.records" class="marginT30">
            <el-col :span="4">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar
                    v-if="dialogList.records && dialogList.records.avatarUrl"
                    :size="50"
                    :src="dialogList.records.avatarUrl"
                  />
                  <el-avatar
                    v-else-if="dialogList.records === 'MALE'"
                    :size="50"
                    :src="avatar.avatar_man"
                  />
                  <el-avatar
                    v-else-if="dialogList.records === 'FEMALE'"
                    :size="50"
                    :src="avatar.avatar_girl"
                  />
                  <el-avatar v-else icon="el-icon-user-solid" />
                </div>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="line-height30">{{ dialogList.records.name }}</div>
              <div v-if="dialogList.records.type === 'TEACHER'" class="line-height20">
                <span v-if="dialogList.records.org.school">{{ dialogList.records.org.school }} |</span>
                <span
                  v-if="
                    dialogList.records.teacher &&
                      dialogList.records.teacher.subjects &&
                      dialogList.records.teacher.subjects.itemName
                  "
                >{{ dialogList.records.teacher.subjects.itemName }} |</span>
                <span v-if="dialogList.records.educational">
                  {{
                  dialogList.records.educational
                  }}
                </span>
              </div>
              <div v-else class="line-height20">
                <span v-if="dialogList.records.org.school">{{ dialogList.records.org.school }} |</span>
                <span
                  v-if="
                    dialogList.records.normalStudent &&
                      dialogList.records.normalStudent.subjects &&
                      dialogList.records.normalStudent.subjects.itemName
                  "
                >
                  {{
                  dialogList.records.normalStudent.subjects.itemName
                  }}
                  |
                </span>
                <span v-if="dialogList.records.educational">
                  {{
                  dialogList.records.educational
                  }}
                </span>
              </div>
            </el-col>
            <el-col :span="4" :offset="6">
              <el-button type="text" class="line-height30">查看详情</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';

import { getLessonList } from '@/api/content';
import {
  getTeacherOpRecommendUser,
  saveTeacherOpRecommendUser,
  updateTeacherOpRecommendUser,
  getUserInfo,
  deleteTeacherOpRecommendUser
} from '@/api/popularize';

export default {
  name: 'Teacher',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      loading: false,
      categoryList: null, // optionsStatus
      valueDate: '',
      // 默认头像
      avatar: {
        avatar_man: require('@/assets/images/avatar_man.png'),
        avatar_girl: require('@/assets/images/avatar_girl.png')
      },
      userQuery: {
        condition: {
          userId: ''
        },
        pager: {
          page: 1,
          pageSize: 100
        }
      },

      listQuery: {
        condition: {},
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      dialogTitle: '添加推荐名师',
      dialogVisible: false,
      dialogList: {
        userId: null,
        records: null
      },

      rules: {
        userId: [{ required: true, message: '请输入用户id!', trigger: 'blur' }]
      },

      listData: [],
      total: 0,
      columns: [
        { label: '序号', value: 'index', align: 'center' },
        { label: '用户名', value: 'name', align: 'center' },
        { label: '用户ID', value: 'userId', align: 'center' },
        { label: '操作', value: 'todo', align: 'center' }
      ]
    };
  },
  created () {
    this.init();
  },
  methods: {
    // 弹窗关闭按钮
    handleClose (done) {
      done();
    },
    init () {
      this.loading = true;
      getTeacherOpRecommendUser(this.listQuery)
        .then(res => {
          this.listData = res.data;
          this.total = res.data && res.data.total ? res.data.total : 1;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    add () {
      console.log(this.listData.length, (this.listData && this.listData.length >= 6));
      this.dialogVisible = true;
      this.dialogList.userId = '';
      this.dialogList.records = null;
    },
    delect (id) {
      console.log('id:', id);
      var msg = '确认是否删除该名师！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteTeacherOpRecommendUser({
            userId: id
          })
            .then(res => {
              this.init();
            })
            .catch(error => {
              this.loading = false;
            });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },
    getUser () {
      getUserInfo(this.dialogList.userId)
        .then(res => {
          this.dialogList.records = res.data;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    saveBtn () {
      if (this.listData && this.listData.length >= 6) {
        this.$message({
          message: '名师广告位已满，最多支持6条~',
          type: 'warning'
        });
        return;
      }
      saveTeacherOpRecommendUser({
        userId: this.dialogList.userId
      })
        .then(res => {
          console.log(res.data);
          this.listQuery = {
            condition: null,
            pager: {
              page: 1,
              pageSize: 10
            }
          };
          this.init();
          this.dialogVisible = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      console.log(this.listQuery);
      this.init();
    },

    getDetail (id) {
      console.log(id);
      this.$router.push({
        path: `/content/teachingDetail`,
        query: { param: id }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
